﻿<template>
    <div>
        <el-dialog :title="title" :visible="state" :before-close="close" :close-on-click-modal="false" style="font-weight: 700">
            <el-form :model="formData">
                <el-form-item label="司机姓名：" :label-width="formLabelWidth">
                    <el-input v-model="formData.user_name" clearable @blur="userNameCS"></el-input>
                    <span>{{userNametext}}</span>
                </el-form-item>
                <el-form-item label="车牌号：" :label-width="formLabelWidth">
                    <el-input v-model="formData.license_number" clearable @blur="carNumCS"></el-input>
                    <span>{{carNumText}}</span>
                </el-form-item>
                <el-form-item label="联系电话：" :label-width="formLabelWidth">
                    <el-input v-model="formData.user_phone" clearable @blur="userPhoneCS"></el-input>
                    <span>{{userPhonetext}}</span>
                </el-form-item>
                <el-form-item label="登录密码：" :label-width="formLabelWidth" v-if="title==='添加司机信息'">
                    <el-input v-model="formData.user_pwd" clearable @blur="userPwdCS"></el-input>
                    <span>{{userPwdtext}}</span>
                </el-form-item>
                <el-form-item label="身份证号：" :label-width="formLabelWidth">
                    <el-input v-model="formData.user_idnum" clearable @blur="userIdnumCS"></el-input>
                    <span>{{userIdnumtext}}</span>
                </el-form-item>
                <el-form-item label="在职状态：" :label-width="formLabelWidth">
                    <div style="position: absolute;left: 0;">
                        <el-radio v-model="radio" label="1" border size="medium" @change="onJobstate">在职</el-radio>
                        <el-radio v-model="radio" label="0" border size="medium" @change="onJobstate">离职</el-radio>
                    </div>
                </el-form-item>
                <el-form-item label="所在区域：" :label-width="formLabelWidth">
                    <div style="position: absolute;left: 0">
                        <el-select v-model="value" placeholder="请选择" @change="searchShi">
                            <el-option
                                    v-for="(item,index) in options"
                                    :key="index"
                                    :label="item.province_name"
                                    :value="item.province_id">
                            </el-option>
                        </el-select>
                        <el-select v-model="value2" placeholder="请选择" @change="searchQu">
                            <el-option
                                    v-for="(item,index) in options2"
                                    :key="index"
                                    :label="item.city_name"
                                    :value="item.city_id">
                            </el-option>
                        </el-select>
                        <el-select v-model="value3" placeholder="请选择" @change="searchQuyu">
                            <el-option
                                    v-for="(item,index) in options3"
                                    :key="index"
                                    :label="item.area_name"
                                    :value="item.area_city_id">
                            </el-option>
                        </el-select>
                    </div>

                </el-form-item>
                <el-form-item label="照片：" :label-width="formLabelWidth" style="display:block;">
                    <el-upload
                            style="width: 33rem;text-align: left"
                            name="multipartFiles"
                            :auto-upload="true"
                            action="/api/user/uploadFile.do"
                            list-type="picture-card"
                            :on-success="successImage">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="tiJiao">确 定</el-button>
                <el-button @click="quXiao">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import * as api from '../../utils/api'
    import jiangMethod from '../../utils/jiangMethod'
    export default {
        name: "driverManagementForm",
        props:['formData','title','state'],
        data(){
            return{
                userNameState:false, userIdnumState:false, userPhoneState:false,userPwdState:false,carNumState:false,
                userNametext:'', userIdnumtext:'', userPhonetext:'',userPwdtext:'', carNumText:'',

                formLabelWidth: '10rem',
                driverFormData:{
                    driverId:'',
                    imgAddress:'',
                    jobStatus:'',
                    licenseNumber:'',
                    regionId:'',
                    userId:'',
                    userLastTime:'',
                    userName:'',
                    userPhone:'',
                    userPwd:'',
                    userIdnum:'',
                },
                radio:'0',
                value:'', options:'', value2:'', options2:'', value3:'', options3:'',

                imageAddress:''
            }
        },
        created() {
            this.axios({
                method:'get',
                url:api.shengCity
            }).then(data=>{
                // console.log(data)
                this.options={...data.data.data}
            })

        },
        watch:{
            formData:function () {
                // console.log(this.formData)
                if (this.formData.job_status===0){
                    this.radio='0'
                }else if (this.formData.job_status===1){
                    this.radio='1'
                }else if (this.formData.job_status===''){
                    this.radio='1'
                }

                this.value = this.formData.province_name
                this.value2 = this.formData.city_name
                this.value3 = this.formData.area_name

                if (this.formData.province_id!=''){
                    this.axios({
                        method:'get',
                        url:api.shiCity,
                        params:{provinceId:this.formData.province_id}
                    }).then(data=>{
                        // console.log(data)
                        this.options2={...data.data.data}
                    })
                }
                if (this.formData.city_id!=''){
                    this.axios({
                        method:'get',
                        url:api.quCity,
                        params:{cityId:this.formData.city_id}
                    }).then(data=>{
                        // console.log(data)
                        this.options3={...data.data.data}
                    })
                }
            },
            title:function () {
                if (this.title==='添加司机信息'){
                    this.options2=[]
                    this.options3=[]
                }else {
                    this.userNameState=true;
                    this.userIdnumState=true;
                    this.userPhoneState=true;
                    this.userPwdState=true;
                    this.carNumState=true
                }
            }
        },
        methods:{
            clearState(){
                this.userNametext=''
                this.userIdnumtext=''
                this.userPhonetext=''
                this.carNumText=''
                this.userPwdtext=''

                this.userNameState=false
                this.userIdnumState=false
                this.userPhoneState=false
                this.carNumState=false
                this.userPwdState=false
            },
            // 验证
            userNameCS(){
                // console.log(this.formData.user_name)
                this.userNameState=jiangMethod.userNameYZ(this.formData.user_name)
                // console.log(this.userNameState)
                if (this.userNameState){
                    this.userNametext='正确'
                }else if (this.formData.user_name===''||this.formData.user_name===undefined){
                    this.userNametext='请输入内容'
                }else {
                    this.userNametext='错误'
                }
            },
            userIdnumCS(){
                this.userIdnumState=jiangMethod.userIdnumYZ(this.formData.user_idnum)
                if (this.userIdnumState){
                    this.userIdnumtext='正确'
                }else if (this.formData.user_idnum===''){
                    this.userIdnumtext='请输入内容'
                }else {
                    this.userIdnumtext='错误'
                }
            },
            userPhoneCS(){
                if (this.title==='添加司机信息'){
                    this.axios({
                        method:'get',
                        url:api.queryDriver,
                        params:{userName:this.formData.user_phone}
                    }).then(data=>{
                        // console.log(data)
                        if (data.data.code===200){
                            this.$message({
                                type:'warning',
                                message:'该手机号已注册,请重新输入手机号'
                            })
                            this.formData.user_phone=''
                            this.userPhonetext=''
                        }
                    })
                }
                this.userPhoneState=jiangMethod.userPhoneYZ(this.formData.user_phone)
                if (this.userPhoneState){
                    this.userPhonetext='正确'
                }else if (this.formData.user_phone===''){
                    this.userPhonetext='请输入内容'
                }else {
                    this.userPhonetext='错误'
                }
            },
            userPwdCS(){
                this.userPwdState=jiangMethod.userPwdYZ(this.formData.user_pwd)
                if (this.userPwdState){
                    this.userPwdtext='正确'
                }else if (this.formData.user_pwd===''){
                    this.userPwdtext='请输入内容'
                }else {
                    this.userPwdtext='错误'
                }
            },
            carNumCS(){
                this.carNumState=jiangMethod.carNumYZ(this.formData.license_number)
                if (jiangMethod.carNumYZ(this.formData.license_number)){
                    this.carNumText='正确'
                }else if (this.formData.license_number===''){
                    this.carNumText='请输入内容'
                }else {
                    this.carNumText='错误'
                }
            },
            // 区域
            searchShi(){
                this.axios({
                    method:'get',
                    url:api.shiCity,
                    params:{provinceId:this.value}
                }).then(data=>{
                    // console.log(data)
                    this.options2={...data.data.data}
                })
            },
            searchQu(){
                this.axios({
                    method:'get',
                    url:api.quCity,
                    params:{cityId:this.value2}
                }).then(data=>{
                    // console.log(data)
                    this.options3={...data.data.data}
                })
            },
            searchQuyu(){
                // console.log(this.value3)
                this.formData.area_city_id=this.value3
            },

            // 在职状态
            onJobstate(val){
                // console.log(val)
                this.driverFormData.jobStatus=val

            },

            successImage(resp,file,fileList){
                // console.log(resp)
                // console.log(file)
                // console.log(fileList)
                this.imageAddress=resp.data
                /*fileList.map(item=>{
                    console.log(item.response.data)
                    this.imageAddress=this.imageAddress+item.response.data
                })
                console.log(this.driverFormData.imgAddress)*/
            },

            tiJiao(){
                this.value = this.formData.province_id
                this.value2 = this.formData.city_id
                this.value3 = this.formData.area_city_id

                // console.log(this.value3)
                this.driverFormData.userName=this.formData.user_name
                this.driverFormData.driverId=this.formData.driver_id
                this.driverFormData.userId=this.formData.user_id
                this.driverFormData.licenseNumber=this.formData.license_number
                this.driverFormData.userPhone=this.formData.user_phone
                this.driverFormData.userPwd=this.formData.user_pwd
                this.driverFormData.userIdnum=this.formData.user_idnum
                this.driverFormData.jobStatus=Number(this.driverFormData.jobStatus)
                this.driverFormData.regionId=this.value3

                if (this.imageAddress){
                    this.driverFormData.imgAddress=this.imageAddress
                }else {
                    this.driverFormData.imgAddress=this.formData.img_address
                }

                if (this.title==='添加司机信息'){
                    // console.log(this.driverFormData)
                    if (this.userNameState&&this.userIdnumState&& this.userPhoneState&&this.carNumState&&this.userPwdState){
                        this.axios({
                            method:'post',
                            url:api.addDriver,
                            data:this.driverFormData
                        }).then(data=>{
                            // console.log(data)
                            if (data.data.code===200){
                                this.$message({
                                    type:'success',
                                    message:data.data.msg
                                })
                            }else {
                                this.$message({
                                    type:'error',
                                    message:data.data.msg
                                })
                            }
                            this.$emit('quxiaotanKuang')
                        })
                    }else {
                        this.$message({
                            type:'warning',
                            message:'请检查输入的信息是否存在错误'
                        })
                    }
                }else{
                    // console.log(this.driverFormData)
                    if (this.userNameState&&this.userIdnumState&& this.userPhoneState&&this.carNumState&&this.userPwdState){
                        this.axios({
                            method:'post',
                            url:api.updateDriver,
                            data:this.driverFormData
                        }).then(data=>{
                            // console.log(data)
                            if (data.data.code===200){
                                this.$message({
                                    type:'success',
                                    message:data.data.msg
                                })
                            }else {
                                this.$message({
                                    type:'error',
                                    message:data.data.msg
                                })
                            }
                            this.$emit('quxiaotanKuang')
                        })

                    }else {
                        this.$message({
                            type:'warning',
                            message:'请检查输入的信息是否存在错误'
                        })
                    }
                }
            },

            close(){
                this.clearState()
                this.$emit('quxiaotanKuang')
            },
            quXiao(){
                this.clearState()
                this.$emit('quxiaotanKuang')
                this.$message({
                    showClose: true,
                    type:"warning",
                    message:'取消操作'
                })
            },
        }
    }
</script>

<style lang="less" scoped>
    .el-select{
        width: 8rem;
    }
    .el-form{
        width: 65%;
        margin: auto;
        /*border: 1px solid red;*/
        .el-form-item{
            position: relative;
            .el-input{
                /*border: 1px solid red;*/
                width: 23rem;
                display: inline-block;
                position: absolute;
                left: 0;
            }
            span{
                position: absolute;
                left: 24rem;
            }
        }

    }
</style>